<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>0517-js作业-螺旋</title>
    <style type="text/css">
        html,input{font-family: "Microsoft YaHei";}
        p,ul,li,input{margin: 0;padding: 0;}
        img{vertical-align: middle;}
        ul{list-style: none;}
        i{font-style: normal;}
        a{text-decoration: none;}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .wrap{
            margin: 20px auto;
            width: 1000px;
        }
        .title,.list,.list li,.total{
            width: 100%;
            overflow: hidden;
        }
        .title li,.list p{
            float: left;
            width: 25%;
            font-size: 14px;
            text-align: center;
            box-sizing: border-box;
        }
        .title{
            background-color: #c82456;
        }
        .title li{
            height: 40px;
            border-top: 1px solid #f66;
            border-bottom: 1px solid #f66;
            border-right: 1px solid #f66;
            color: #fff;
            line-height: 40px;
        }
        .title li:nth-child(1){
            border-left: 1px solid #f66;
        }
        .list li:hover{
            background-color: #ffedc8;
        }
        .list p{
            border-right: 1px solid #f66;
            border-bottom: 1px solid #f66;
            height: 120px;
            line-height: 120px;
        }
        .list p:nth-child(1){
            border-left: 1px solid #f66;
        }
        .list p img{
            width: 100px;
        }
        .list p .add,.list p .cut{
            display: inline-block;
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
        }
        .list p .add{
            background-color: #ffbb00;
            cursor: pointer;
        }
        .list p .cut{
            background-color: #ddd;
            color: #999;
            cursor: default;
        }

        .list p .num{
            display: inline-block;
            width: 50px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #bbb;
            line-height: 25px;
            text-align: center;
        }
        .total{
            margin-top: 10px;
            height: 50px;
            background-color: #c82456;
            color: #fff;
            font-size: 14px;
            line-height: 50px;
        }
        .total span{
            float: right;
            width: 25%;
            text-align: center;
        }
        .total span i{
            font-size: 20px;
            color: #ffc700;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <ul class="title">
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
        </ul>
        <ul class="list">
            <li>
                <p><img src="images/1.jpg" alt="商品图"></p>
                <p class="price">189</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/2.jpg" alt="商品图"></p>
                <p class="price">99</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/3.jpg" alt="商品图"></p>
                <p class="price">109</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
            <li>
                <p><img src="images/4.jpg" alt="商品图"></p>
                <p class="price">89</p>
                <p><span class="cut">-</span><span class="num">1</span><span class="add">+</span></p>
                <p class="price-t"></p>
            </li>
        </ul>
        <p class="total">
            <span>总计金额：<i></i> 元</span>
            <span>已选商品: <i></i> 件</span>
        </p>
    </section>
</body>
<script>
    var oList = document.getElementsByClassName('list')[0],
        oItem = oList.getElementsByTagName('li').length,//列表的行数 支持扩展li的行数
        oPri = document.getElementsByClassName('price'),
        oPriT = document.getElementsByClassName('price-t'),
        oCut = document.getElementsByClassName('cut'),
        oAdd = document.getElementsByClassName('add'),
        oNum = document.getElementsByClassName('num'),
        oTot = document.getElementsByClassName('total')[0],
        oNumT = oTot.getElementsByTagName('i')[1],//已选商品的<i>标签
        oPriTT = oTot.getElementsByTagName('i')[0],//总计金额的<i>标签
        numt = 0,//已选商品的值
        pritt = 0;//总计金额的值

    for(var i=0;i<oItem;i++){
        //页面加载完毕时 先生成默认数值
        oPriT[i].innerHTML = oNum[i].innerHTML * oPri[i].innerHTML;
        numt += Number(oNum[i].innerHTML);
        pritt += Number(oPri[i].innerHTML);

        //加号按钮事件开始
        oAdd[i].num = i;
        oAdd[i].onmouseenter = function(){
            oAdd[this.num].style = 'background-color: #ffc700;';
        }
        oAdd[i].onmouseleave = function(){
            oAdd[this.num].style = '';
        }
        oAdd[i].onclick = function(){
            oNum[this.num].innerHTML ++;
            oPriT[this.num].innerHTML = oNum[this.num].innerHTML * oPri[this.num].innerHTML;
            pritt += Number(oPri[this.num].innerHTML);
            numt ++;
            fn();
            //点击加号按钮后 如果input的value值大于0 则使减号按钮恢复默认状态
            if(oNum[this.num].innerHTML>1){
                oCut[this.num].style = 'background-color: #ffbb00;color: #000;cursor: pointer;';
            }
        }

        //减号按钮事件开始
        oCut[i].num = i;
        oCut[i].onmouseenter = function (){
            if(oNum[this.num].innerHTML>1){
                oCut[this.num].style = 'background-color: #ffc700;color: #000;cursor: pointer;';
            }
        }
        oCut[i].onmouseleave = function(){
            if(oNum[this.num].innerHTML>1){
                oCut[this.num].style = 'background-color: #ffbb00;color: #000;cursor: pointer;';
            }
        }
        oCut[i].onclick = function(){
            if(oNum[this.num].innerHTML>1){
                oNum[this.num].innerHTML --;
                oPriT[this.num].innerHTML = oNum[this.num].innerHTML * oPri[this.num].innerHTML;
                pritt -= Number(oPri[this.num].innerHTML);
                numt --;
                fn();
            }
            //点击减号按钮后 如果个数的数值小于2 则使减号按钮变灰 不可点击
            if(oNum[this.num].innerHTML<2){
                oCut[this.num].style = 'background-color: #ddd;color: #999;cursor: default;';
            }
        }
    }//循环结束

    //生成总计数值的函数
    function fn(){
        oNumT.innerText = numt;
        oPriTT.innerHTML = pritt;
    };
    //页面加载完毕时 先执行一次函数fn
    fn();
</script>
</html>